import React, { useEffect, useState } from 'react'
import request from '../../axios/request.js'
import { ActionBar } from 'react-vant'
const Index = () => {
    const [list,setlist]=useState([])
    const [isSpeed,setisSpeed]=useState(false)
    const [isSeat,setisSeat]=useState(false)
    const [isDesc,setisDesc]=useState(false)
    const getData=async()=>{
        const res=await request.post('/api/trip/train',{start:'北京',end:'广州',isSpeed,isSeat,isDesc})
        const {code,data}=res.data
        console.log(res)
        if(code==200){
            setlist(data)
        }
    }
    useEffect(()=>{
        getData()
    },[isSpeed,isSeat,isDesc])
  return (
    <div>
      {
        list.map((item,index)=>{
            return <div key={index}>
            <span style={{marginRight:'20px'}}>{item.start}-{item.end}</span>
            <span style={{marginRight:'20px'}}>{item.startTime}</span>
            <span style={{marginRight:'20px'}}>{item.isSeat?'有座':'无座'}</span>
            <span style={{marginRight:'20px'}}>{item.isSpeed?'有票':'无票'}</span>
            </div>
        })
      }
      <ActionBar>
        <ActionBar.Icon
          text='有票无票'
          onClick={() =>setisSpeed(true)}
        />
        <ActionBar.Icon
          text='有座无座'
          onClick={() => setisSeat(true)}
        />
        <ActionBar.Icon
          text='时间'
          onClick={() => setisDesc(true)}
        />
      </ActionBar>
    </div>
  )
}

export default Index
